import React, { useState, useEffect, useRef } from 'react';
import { EdrmsTypePieStyle } from './style';
import * as echarts from 'echarts';
import { EdrmsTypeDto } from '@/services/types';
import { triggerAsyncId } from 'async_hooks';
import { getFontSize } from '@/utils/tools/common';
import useEchartsResize from '@/utils/hooks/useEchartsResize';


type EdrmsTypePiePropsType = {
    data: EdrmsTypeDto
};

const BorrowCount: React.FC<EdrmsTypePiePropsType> = (props) => {
    const { data } = props;  
    
    const colors = [
        { a: '#6ED401', b: '#4AD79C' },
        { a: '#5F6DFE', b: '#6885F9' },
        { a: '#1067FF', b: '#2BD6FE' },
        { a: '#FFA701', b: '#FEDB66' },
        { a: '#0372B4', b: '#0FDED6' },
    ]

    const echartsDataA = data.edrmsTypeData?.map((o, index) => {
        return {
            value: o.number,
            name: o.name,
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: colors[index].a }, // 0% 处的颜色
                        { offset: 1, color: colors[index].b } // 100% 处的颜色
                    ],
                    global: false // 缺省为 false
                }
            }
        }
    })
    const echartsDataB = data.edrmsTypeData?.map((o, index) => {
        return {
            value: o.number,
            name: o.name,
            itemStyle: {
                color: '#000',
                opacity: 0.5,
                colorStops: [
                    { offset: 0, color: colors[index].a }, // 0% 处的颜色
                    { offset: 1, color: colors[index].b } // 100% 处的颜色
                ],
            },
        };
    })
    let option = {
        tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(0,0,0,0.73)',
            borderColor: '#00527B',
            borderRadius: 4,
            textStyle: {
                fontSize: getFontSize(12),
                fontFamily: 'Microsoft YaHei',
                fontWeight: 400,
                color: '#001342',
                height: 12,
                textBorderType: 'solid'
            },
            formatter: '{c}亿'
        },
        legend: {
            top: '18px',
            left: 'center',
            itemHeight: 15,
            show: false,
            itemWidth: 15,
            textStyle: {
                color: '#FFFFFF'
            },
        },
        title: [
            { // 第一个圆环标题
                text: data.total, // 主标题
                textStyle: { // 主标题样式
                    color: '#eee',
                    fontWeight: 400,
                    fontSize: getFontSize(12)
                },
                show: true,
                left: '47%', // 定位到适合的位置
                top: '40%', // 定位到适合的位置
                subtext: '馆藏总文件量', // 副标题
                subtextStyle: { // 副标题样式
                    color: '#ddd',
                    fontSize: getFontSize(10),
                    fontWeight: 400
                },
                textAlign: 'center', // 主、副标题水平居中显示
            },
        ],
        series: [
            {
                name: '',
                // top: '10%',
                center: ['50%', '50%'],
                type: 'pie',
                radius: ['40%', '80%'],//修改圆圈大小
                avoidLabelOverlap: false,
                label: {
                    show: false,//开启提示线文字
                },
                emphasis: {
                    scale: false,//鼠标划上不展示高亮放大效果
                    label: {
                        show: false,
                    }
                },
                labelLine: {
                    show: false
                },
                data: echartsDataA
            },
            {
                name: '',
                // top: '10%',
                type: 'pie',
                center: ['50%', '50%'],
                radius: ['40%', '60%'],//修改圆圈大小
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center',
                },
                emphasis: {
                    scale: false,//鼠标划上不展示高亮放大效果
                    label: {
                        show: false,
                    }
                },
                labelLine: {
                    show: false
                },
                data:echartsDataB
            },
        ]

    };

    // const chartRef = useEchartsResize(option, [props.data])

    const chartRef = useRef<HTMLDivElement>(null);
    useEffect(() => {
        let chart: any = null;
        if (chartRef.current) {
            // 创建一个echarts实例，返回echarts实例。不能在单个容器中创建多个echarts实例
            chart = echarts.init(chartRef.current);
            // 设置图表实例的配置项和数据         
            option && chart.setOption(option);
        }

        // 组件卸载
        return () => {
            // myChart.dispose() 销毁实例。实例销毁后无法再被使用
            chart.dispose();
        };
    }, [props.data]);

    return (
        <EdrmsTypePieStyle>
            <div className='box'>
                <div ref={chartRef} style={{ width: '100%', height: '80%' }}>
                </div>
                <div className='edrmsTypePie' style={{ width: '100%', height: '80%'  }}>
                </div>
            </div>

        </EdrmsTypePieStyle>
    );
};

export default BorrowCount;
